<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex; flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.skuCode"
              placeholder="SKU编码"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.skuName"
              placeholder="商品名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.classifyName"
              placeholder="商品分类"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.attrName"
              placeholder="属性"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="timeData"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              range-separator="-"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              unlink-panels
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="clickSearch"
              >查询</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button
        type="primary"
        @click="clickAdd"
        v-hasPermi="['commodity:sku:save']"
        >新建商品</el-button
      >
      <el-button type="primary">商品导出</el-button>
      <el-button type="primary">批量导入</el-button>
      <el-button
        type="danger"
        @click="batchDelete"
        v-hasPermi="['commodity:sku:delete']"
        >删除所选</el-button
      >
      <el-button type="primary">导入模板下载</el-button>
      <el-button type="primary" @click="clickPrint">商品条码打印</el-button>
    </div>
    <vxe-table
      ref="tableRef"
      border
      show-overflow
      align="center"
      :data="tableData"
      :height="tableHeight"
      :row-config="{ isCurrent: true, isHover: true }"
      style="margin-top: 10px"
      :checkbox-config="{ trigger: 'row' }"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="80" title="序号" tree-node></vxe-column>
      <vxe-column field="skuCode" width="200" title="SKUID"></vxe-column>
      <vxe-column
        field="productSkuId"
        width="200"
        title="云产品ID"
      ></vxe-column>
      <vxe-column field="companyName" width="150" title="公司名称"></vxe-column>
      <vxe-column
        field="warehouseName"
        width="150"
        title="仓库名称"
      ></vxe-column>
      <vxe-column field="skuName" width="220" title="商品名称"></vxe-column>
      <vxe-column field="coverUrl" width="180" title="商品图片">
        <template #default="{ row }">
          <ImagePreview
            v-if="row.coverUrl"
            :width="150"
            :height="50"
            :src="row.coverUrl"
          ></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column
        field="classifyName"
        width="120"
        title="商品分类"
      ></vxe-column>
      <vxe-column field="attrName" width="120" title="属性"></vxe-column>
      <vxe-column field="brand" width="120" title="品牌"></vxe-column>
      <vxe-column
        field="earlyWarnDay"
        width="110"
        title="商品预警天数"
      ></vxe-column>
      <vxe-column
        field="returnDay"
        width="110"
        title="商品退货天数"
      ></vxe-column>
      <vxe-column
        field="expireDate"
        width="100"
        title="商品保质期"
      ></vxe-column>
      <vxe-column field="unitType" width="80" title="单位"></vxe-column>
      <vxe-column field="weight" width="80" title="重量kg"></vxe-column>
      <vxe-column field="volume" width="80" title="体积m3"></vxe-column>
      <vxe-column field="length" width="80" title="长cm"></vxe-column>
      <vxe-column field="weight" width="80" title="宽cm"></vxe-column>
      <vxe-column field="height" width="80" title="高cm"></vxe-column>
      <vxe-column field="price" width="80" title="售价¥"></vxe-column>
      <vxe-column field="tagPrice" width="80" title="吊牌价¥"></vxe-column>
      <vxe-column field="createByName" width="80" title="操作人"></vxe-column>
      <vxe-column field="createTime" width="180" title="操作时间"></vxe-column>
      <vxe-column fixed="right" width="200" title="操作">
        <template #default="{ row }">
          <el-button
            type="text"
            @click="clickEdit(row)"
            v-hasPermi="['commodity:sku:save']"
            >编辑</el-button
          >
          <el-button type="text" style="color: green" @click="clickView(row)"
            >查看
          </el-button>
          <el-button
            type="text"
            style="color: red"
            @click="handleDelete(row)"
            v-hasPermi="['commodity:sku:delete']"
            >删除
          </el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <EditIndex
      :isShowDialog="isShowDialog"
      v-if="isShowDialog"
      :title="title"
      :detailData="detailData"
      :isView="isView"
      @cancel="handleClose"
    ></EditIndex>

    <!--    商品条码打印-->
    <GoodsBarcodePrint
      :isShowDialog="isShowGoodsPrint"
      v-if="isShowGoodsPrint"
      :detailData="printRows"
      @cancel="closePrint"
    ></GoodsBarcodePrint>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";
import EditIndex from "@/views/commodity/commodityManagement/editIndex.vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import { getSkuDetail, getSkuList, skuDelete } from "@/api/scApi";
import { flattenData } from "@/utils/shuangcheng";
import GoodsBarcodePrint from "@/views/commodity/commodityManagement/goodsBarcodePrint.vue";

const { proxy } = getCurrentInstance();
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  startTime: "",
  endTime: "",
});
let total = ref(1);
let title = ref("");
let isView = ref(false);
let timeData = ref([]);
let loading = ref(false);
let isShowGoodsPrint = ref(false);
let printRows = ref([]);
const clickSearch = () => {
  getList();
};

const resetQuery = () => {
  timeData.value = [];
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    startTime: "",
    endTime: "",
  };
  getList();
};

function getList() {
  loading.value = true;
  queryParams.value.startTime = timeData.value[0];
  queryParams.value.endTime = timeData.value[1];

  getSkuList({
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value,
  })
    .then((res) => {
      loading.value = false;
      tableData.value = flattenData(res.data);
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  getList();
});

let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 350;
});
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 350;
};

let tableData = ref([]);

let isShowDialog = ref(false);

function clickAdd() {
  title.value = "新建商品";
  isShowDialog.value = true;
}

function clickEdit(row) {
  title.value = "编辑商品";
  if (row.parentId) {
    getDetailData(row.parentId);
  } else {
    getDetailData(row.skuId);
  }
}
let detailData = ref({}); //当前行详情数据
function getDetailData(id) {
  getSkuDetail(id).then((res) => {
    if (res.code === 200) {
      detailData.value = res.data;
      isShowDialog.value = true;
    }
  });
}

function clickView(row) {
  title.value = "查看商品";
  isView.value = true;
  if (row.parentId) {
    getDetailData(row.parentId);
  } else {
    getDetailData(row.skuId);
  }
}
//删除子级
function handleDelete(row) {
  let detailIds = row.skuDetailId;
  if (row.skuDetailId) {
    //如果是删除子级
    deleteData([], [detailIds]);
  } else {
    deleteData([row.skuId], [detailIds]);
  }
}
function deleteData(ids, detailIds) {
  proxy.$modal
    .confirm("是否确认删除该数据？")
    .then(() => {
      skuDelete({ ids: ids, detailIds: detailIds }).then((res) => {
        if (res.code === 200) {
          getList();
          proxy.$modal.msgSuccess("删除成功");
        }
      });
    })
    .catch(() => {});
}

//删除所选
function batchDelete() {
  const $table = proxy.$refs.tableRef;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    let ids = selectRecords.map((item) => item.skuId);
    let detailIds = selectRecords.map((item) => item.skuDetailId);

    deleteData(ids, detailIds);
  }
}

function handleClose(isReload) {
  isShowDialog.value = false;
  isView.value = false;
  detailData.value = {};
  if (isReload) {
    getList();
  }
}

function clickPrint() {
  const $table = proxy.$refs.tableRef;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    if (selectRecords.length === 0) {
      proxy.$modal.msgWarning("请选择要打印的数据!");
    } else {
      printRows.value = selectRecords.filter((item) => !item.parentId);
      isShowGoodsPrint.value = true;
    }
  }
}

function closePrint() {
  printRows.value = {};
  isShowGoodsPrint.value = false;
}
</script>

<style scoped lang="scss"></style>
